<template>
  <div id="top-header">
    <dv-decoration-8 class="header-left-decoration" />
    <dv-decoration-5 class="header-center-decoration" />
    <dv-decoration-8 class="header-right-decoration" :reverse="true" />
    <div class="center-title">{{tittle}}</div>
    <div class="right-time">{{date}}</div>
  </div>
</template>

<script>
export default {
  name: 'TopHeader',
  data () {
    return {
      date: null,
      //new Date().toLocaleDateString() + "\xa0\xa0\xa0\xa0\xa0\xa0  " + new Date().toLocaleTimeString() ,
      tittle: '热防护滚涂'
    };
  },
  mounted() {
    let _this = this; // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {

      var dd = new Date();
			//获取年、月、日、时、分、秒
			//月份要加 1
			//月、日、时、分、秒、用三目运算法判断是否小于等于9，是则在数字前面自动补0，否则不处理
			var y = String(dd.getFullYear());
			var m = String(dd.getMonth() + 1 <= 9 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1));
			var d = String(dd.getDate() <= 9 ? '0' + dd.getDate() : dd.getDate());
			var h = String(dd.getHours() <= 9 ? "0" + dd.getHours() : dd.getHours());
			var i = String(dd.getMinutes() <= 9 ? '0' + dd.getMinutes() : dd.getMinutes());
			var s = String(dd.getSeconds() <= 9 ? '0' + dd.getSeconds() : dd.getSeconds());
			var wkday = dd.getDay();  //获取今天是星期几
      _this.date =y + "年" + m + "月" + d + "日" + "\xa0\xa0\xa0\xa0\xa0\xa0 " + h + ":" + i + ":" + s + " \xa0\xa0\xa0\xa0\xa0\xa0 "
      + "星期" + "日一二三四五六".charAt(wkday); // 修改数据date
    }, 1000)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
    }
  }
};

</script>

<style lang="less">
#top-header {
  position: relative;
  width: 100%;
  height: 10%;
  display: inline;
  justify-content: space-between;
  flex-shrink: 0;

  .header-center-decoration {
    width: 40%;
    height: 60px;
    margin-top: 30px;
  }

  .header-left-decoration, .header-right-decoration {
    width: 25%;
    height: 60px;
  }

  .center-title {
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    left: 50%;
    top: 15px;
    transform: translateX(-50%);
  }

  .right-time{
    position: absolute;
     font-size: 20px;
    font-weight: bold;
    right: 5%;
    top: 35px;
    color: yellow;
  }
}
</style>
